<template>
	<div class="chart-container" @mouseenter="isHovering = true" @mouseleave="isHovering = false">
		<canvas ref="canvas" :width="width" :height="height"></canvas>
		<div v-show="isHovering && showIndicator" class="chart-usage-indicator">
			<span class="usage-label">{{ indicatorText }}</span>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, watch, nextTick } from 'vue'

// Props 定义
const props = defineProps({
	width: {
		type: Number,
		default: 200
	},
	height: {
		type: Number,
		default: 97
	},
	data: {
		type: Array,
		default: () => []
	},
	gridColor: {
		type: String,
		default: 'rgb(201,146,217)'
	},
	fillColor: {
		type: String,
		default: 'rgba(208, 159, 222, .3)'
	},
	strokeColor: {
		type: String,
		default: 'rgb(208,159,222)'
	},
	gridSize: {
		type: Number,
		default: 20
	},
	showIndicator: {
		type: Boolean,
		default: true
	},
	indicatorText: {
		type: String,
		default: '使用中'
	},
	amplify: {
		type: Number,
		default: 1
	}
})

// 响应式数据
const canvas = ref(null)
const isHovering = ref(false)

// 绘制图表函数
const drawChart = () => {
	const canvasEl = canvas.value
	if (!canvasEl) {
		console.warn('⚠️ Canvas 元素未找到:', props.indicatorText)
		return
	}
	if (!props.data.length) {
		console.warn('⚠️ 数据为空:', props.indicatorText, props.data)
		return
	}
	
	console.log('🎨 开始绘制图表:', props.indicatorText, '数据点数:', props.data.length)

	const ctx = canvasEl.getContext('2d')
	const { width, height } = props

	// 清空画布
	ctx.clearRect(0, 0, width, height)

	// 绘制白色背景
	ctx.fillStyle = 'white'
	ctx.fillRect(0, 0, width, height)

	// 绘制网格线
	ctx.strokeStyle = props.gridColor
	ctx.lineWidth = props.gridSize >= 20 ? 1 : 0.5

	// 垂直网格线
	for (let x = 0; x <= width; x += props.gridSize) {
		ctx.beginPath()
		ctx.moveTo(x, 0)
		ctx.lineTo(x, height)
		ctx.stroke()
	}

	// 水平网格线
	for (let y = 0; y <= height; y += props.gridSize) {
		ctx.beginPath()
		ctx.moveTo(0, y)
		ctx.lineTo(width, y)
		ctx.stroke()
	}

	// 绘制数据图表
	if (props.data.length > 1) {
		// 绘制填充区域
		ctx.fillStyle = props.fillColor
		ctx.globalAlpha = 1

		ctx.beginPath()
		ctx.moveTo(0, height)

		// 绘制数据点
		props.data.forEach((value, index) => {
			const x = (index / (props.data.length - 1)) * width
			const y = height - (value * height * props.amplify)

			if (index === 0) {
				ctx.lineTo(x, y)
			} else {
				ctx.lineTo(x, y)
			}
		})

		ctx.lineTo(width, height)
		ctx.closePath()
		ctx.fill()

		// 绘制边界线
		ctx.globalAlpha = 1
		ctx.strokeStyle = props.strokeColor
		ctx.lineWidth = props.gridSize >= 20 ? 2 : 1
		ctx.beginPath()

		props.data.forEach((value, index) => {
			const x = (index / (props.data.length - 1)) * width
			const y = height - (value * height * props.amplify)

			if (index === 0) {
				ctx.moveTo(x, y)
			} else {
				ctx.lineTo(x, y)
			}
		})

		ctx.stroke()
	}
	
	console.log('✅ 图表绘制完成:', props.indicatorText)
}

// 监听数据变化
watch(() => props.data, (newData, oldData) => {
	console.log('📊 ChartCanvas 数据变化:', {
		newLength: newData?.length || 0,
		oldLength: oldData?.length || 0,
		newData: newData?.slice(-3) || [], // 显示最后3个数据点
		indicatorText: props.indicatorText
	})
	nextTick(() => {
		drawChart()
	})
}, { deep: true, immediate: true })

// 监听其他 props 变化
watch([
	() => props.width,
	() => props.height,
	() => props.gridColor,
	() => props.fillColor,
	() => props.strokeColor,
	() => props.gridSize,
	() => props.amplify
], () => {
	nextTick(() => {
		drawChart()
	})
})

// 组件挂载后绘制
onMounted(() => {
	nextTick(() => {
		drawChart()
	})
})

// 暴露重绘方法
defineExpose({
	redraw: drawChart
})
</script>

<style scoped lang="scss">
.chart-container {
	position: relative;

	canvas {
		display: block;
		border: 1px solid rgb(208, 159, 222);
		border-radius: 4px;
	}

	.chart-usage-indicator {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: rgba(0, 0, 0, 0.7);
		color: white;
		padding: 4px 8px;
		border-radius: 4px;
		font-size: 12px;
		white-space: nowrap;

		.usage-label {
			font-size: 12px;
		}
	}
}
</style>